<template>
	<view>
		<!--pages/shipping-address/index.wxml-->
		<!-- <text>pages/shipping-address/index.wxml</text> -->
		<view class="content">
			<form @submit="formSubmit">
				<view class="info-item">
					<view class="item-title">收货人</view>
					<input name="name" type="text" class="input" placeholder-class="placeholder" placeholder="请输入姓名" />
				</view>
				<view class="info-item">
					<view class="item-title">手机号码</view>
					<input name="phone" type="number" class="input" maxlength="11" placeholder-class="placeholder"
						placeholder="请输入手机号码" />
				</view>
				<view class="info-item">
					<view class="item-title">所在地区</view>
					<view class="flex-space input">
						<pickers @address="bindRegionChange" :defaultAddress="region" name="region" >
							<view class="picker">
								<text class="placeholder" v-if="region[0]==''">请选择所在地区</text>
								<text class="text-address" v-else>{{region[0]}} {{region[1]}} {{region[2]}}</text>
							</view>
						</pickers>

						<image src="../../static/image/page/drop-down-icon.png" class="drop-down-icon"></image>
					</view>
				</view>
				<view class="info-item">
					<view class="item-title">详细地址</view>
					<input name="address" type="text" class="input" placeholder-class="placeholder"
						placeholder="请填写您的详细收货地址" />
				</view>

				<!-- 按钮 -->
				<button formType="submit" class="blue-btn save-btn">保存并使用</button>
			</form>
		</view>
	</view>
</template>

<script>
	import pickers from "@/components/ming-picker/ming-picker.vue"
	export default {
		components: {
			pickers
		},
		data() {
			return {
				region: ['', '', ''],
				uid: '', //用户id
				cid: '', //商品id
				formData: {},
			}
		},
		onLoad(options) {
			this.uid = options.uid;
			this.cid = options.cid;
		},
		methods: {
			//选中地区
			bindRegionChange(e) {
				console.log(e)
				this.region = e.value;
			},
			//保存
			formSubmit(e) {
				let data = e.detail.value;
				data.region = this.region.join(' ');
				data.uid = this.uid;
				data.cid = this.cid;
				let isNaN = false;
				for (const key in data) {
					if (!data[key]) {
						isNaN = true;
					}
				}
				if (isNaN) {
					uni.showToast({
						icon: 'none',
						title: '填写完整信息',
					})
				} else {

					this.formData = data;

					this.$api.exchange(this.formData).then(res => {
						uni.navigateTo({
							url: '/pages/dh-successful/index',
						})
					})
				}


			},

		},
	};
</script>

<style scoped>
	.content {
		background-color: #ffffff;
		padding: 0 30rpx;
	}

	.info-item {
		height: 106rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.02);
		display: flex;
		align-items: center;
	}

	.item-title {
		font-size: 32rpx;
		color: #333333;
		width: 200rpx;
	}

	.input {
		flex: 1;
		font-size: 32rpx;
	}

	.placeholder {
		font-size: 32rpx;
		color: #999999;
	}

	.drop-down-icon {
		width: 19rpx;
		height: 11rpx;
	}

	.text-address {
		font-size: 28rpx;
		color: #000000;
	}

	.save-btn {
		position: fixed;
		bottom: 80rpx;
		left: 30rpx;
		right: 30rpx;
		width: auto;

	}
</style>
